﻿{% extends "gma/base.html" %}
{% load static %}
{% load mytag %}

{% block extra_css %}
<link href="{% static 'css/morris.css' %}" rel="stylesheet">
{% endblock extra_css %}

<!-- CONTENT
  =====================================================================-->

{% block content %}

<div class="page__hd">
    <h1 class="page__title">
        <i class="fa fa-archive weui_grid_icon_fa" style="font-size: 32px;"> </i> 统计数据
    </h1>
    <p class="page__desc"> {{ data_title }} </p>
</div>

<div class="page__bd">
    <div class="weui-cells__title"> 趋势图 </div>
    <div id="chart-id"></div>

    <div class="weui-cells__title"> 详细数据 </div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd"> <p> 时间 </p> </div>
            <div class="weui-cell__bd"> <p> {{ data_labels.0 }} </p> </div>
            <div class="weui-cell__ft"> <p> {{ data_labels.1 }} </p> </div>
        </div>
        {% for k, v1, v2 in data %}
        <div class="weui-cell">
            <div class="weui-cell__bd"> <p> <i class="fa fa-clock"></i> {{ k|slice:"-5:" }} </p> </div>
            <div class="weui-cell__bd"> <p> {{ v1 }} </p> </div>
            <div class="weui-cell__ft"> <p> {{ v2 }} </p> </div>
        </div>
        {% endfor %}
    </div>
</div>

<div class="page__ft">
    <a href="{% url 'gma:home' %}">
        <span class="bottom-logo">
           HiBao
       </span>
    </a>
</div>

{% endblock content %}


<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}

<script src="{% static 'js/raphael-2.1.0.min.js' %}"></script>
<script src="{% static 'js/morris.min.js' %}"></script>

<script>
$(document).ready(function() {
    Morris.Line({
        element: 'chart-id',
            data: [
                {% for k, v1, v2 in data %}
                { x: '{{ k }}', y1: {{ v1 }}, y2: {{ v2 }} },
                {% endfor %}
            ],
        xkey: 'x',
        ykeys: ['y1', 'y2'],
        resize: true,
        lineWidth:4,
        labels: {{ data_labels|safe }},
        lineColors: ['#3CC51F', '#887733'],
        pointSize:5,
    });
});
</script>

{% endblock extra_js %}